<template>
  <el-cascader ref="cascaderRef" v-model="current" :props="props" style="width: 100%" @change="onChange" />
</template>

<script setup lang="ts">
import { CascaderProps, CascaderValue } from "element-plus";
import InspectInfoBaseApi from "../api/webPath/InspectInfoBaseApi";

const modelProps = defineProps<{
  serialName: string
}>()


const current = computed(() => {
  console.log("computed", [serialNumModel.value, serialTypeModel.value, serialNameModel.value])
  return [serialNumModel.value, serialTypeModel.value, serialNameModel.value]
})

const cascaderRef = useTemplateRef("cascaderRef");
const model = defineModel("modelValue");
const serialNumModel = defineModel("serialNum");
const serialNameModel = defineModel("serialName");
const serialTypeModel = defineModel("serialType");
const emit = defineEmits(["change", "update:serialName"]);

watch(() => serialNameModel.value, (newValue, oldValue) => {
  if (newValue !== undefined && oldValue === undefined) {
    emit("change", { serialNum: serialNumModel.value, serialType: serialTypeModel.value, serialName: serialNameModel.value })
  }
})
// const modelValue = computed<any>({
//   get() {
//     return model.value
//   },
//   set(v) {
//     model.value = v
//     // emit("update:modelValue",v)
//   },
// });
const props: CascaderProps = {
  lazy: true,
  async lazyLoad(node, resolve) {
    const { level } = node;
    console.log("level", level);
    const levelSet = new Set();
    console.log("node", node);

    if (level === 0) {
      const { data } = await InspectInfoBaseApi.inspectInfoList({});
      console.log("data", data);
      data.data.forEach((x) => {
        levelSet.add(x.serialNum);
      });
      console.log("levelSet", levelSet);
      const nodes: any[] = [];
      levelSet.forEach((x) => {
        nodes.push({
          value: x,
          label: x,
          leaf: false,
        });
      });
      resolve(nodes);
    } else if (level === 1) {
      console.log("current node", node);
      const { data } = await InspectInfoBaseApi.inspectInfoList({
        serialNum: node.value,
      });
      console.log("data", data);
      data.data.forEach((x) => {
        levelSet.add(x.serialType);
      });
      const nodes: any[] = [];
      levelSet.forEach((x) => {
        nodes.push({
          value: x,
          label: x,
          leaf: false,
        });
      });
      resolve(nodes);
    } else if (level === 2) {
      console.log("current node", node);
      const { data } = await InspectInfoBaseApi.inspectInfoList({
        serialType: node.value,
      });
      console.log("data", data);
      data.data.forEach((x) => {
        levelSet.add(x.serialName);
      });
      const nodes: any[] = [];
      levelSet.forEach((x) => {
        nodes.push({
          value: x,
          label: x,
          leaf: true,
        });
      });
      resolve(nodes);
    }
  },
};

function onChange(value: CascaderValue) {
  const allNodes = cascaderRef.value?.getCheckedNodes(false);
  console.log("all nodes ", allNodes);
  const [serialNum, serialType, serialName] =
    (allNodes && allNodes[0].pathValues) || [];
  console.log(
    `serialNum ${serialNum} serialType ${serialType} serialName ${serialName}`
  );
  serialNumModel.value = serialNum;
  serialNameModel.value = serialName;
  serialTypeModel.value = serialType;
  emit("change", { serialNum, serialType, serialName });
}
</script>

<style scoped></style>
